<!DOCTYPE html>
<html lang="en" ng-app="toggle">
<head>
    <meta charset="UTF-8">
    <script src="../angular/angular.js"></script>
    <title>隐藏与显示</title>
</head>
<body>
    <div ng-controller="HideAndshow">
        <button ng-click="toggleMenu()">Toggle Menu</button>
        <ul>
            <li ng-repeat="list in lists" ng-click="toggleMenu(this)">{{list.id}}
                <ul ng-show="menuState">
                    <li ng-click="stun()">{{list.user_id}}</li>
                    <li ng-click="disintegrate()">{{list.name}}</li>
                    <li ng-click="erase()">{{list.sex}}</li>
                </ul>
            </li>
            <li ng-click="erase()">Erase from history</li>
        </ul>
    </div>
<script>
    var app = angular.module('toggle',[]);
    app.controller('HideAndshow',function($scope,$http){
        $http({
            // method:'JSON',
            url:'bower.json'
        }).success(function(data,status){
            $scope.lists = data;
            $scope.menuState = false;
            $scope.toggle = function () {
                $scope.menuState = !$scope.menuState;
            };
            $scope.toggleMenu = function(scope){
                scope.toggle();
            };
            console.log(data.length)
        }).error(function(data, status) {
            console.log(data);
        });
     });
</script>
</body>
</html>